<template>
  <div class="rate">
    <span>☆☆☆☆☆</span>
    <div class="hollow" :style="style">
      ★★★★★
    </div>
  </div>
</template>

<script>
export default {
  name: 'Rate',
  props: {
    value: {
      type: [Number, String],
      default: 0
    }
  },
  computed: {
    style () {
      return `width: ${this.value / 2 - 1}em`
    }
  }
}
</script>

<style lang="stylus" scoped>
  .rate
    position relative
    display inline-block
    .hollow
      position absolute
      top 0
      left 0
      overflow hidden
      display inline-block
      width 0
</style>